샘플예제
Element 오브젝트는 DOM의 엘리먼트를 제어하는 함수 및 메서드를 포함하고 있다.
함수
| 함수 | 기능개요 |
|---|---|
| $() | document.getElementById() 메서드를 축약한 함수다 지정된 한개 또는 복수의 엘레먼트 ID를 오브젝트로 반환한다. 보수일경우 에는 오브젝트 배열로 반환 |
주요 메소드 (전체가 필요할경우 책 또는 프로토타입참고하기 바란다.
함수
Element 오브젝트의 함수인 $() 는 String type의 아규먼트를 받아 들이고 Object type 또는 Object Array 을 리턴 한다.
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (Object.isString(element))
element = document.getElementById(element);
return Element.extend(element);
}
arguments.length를 통해서 아규먼트의 개수에 따라 다른 처리를 하고 있다.
코드를 자세히 살펴 보면 재귀호출형태의 코드도 살펴 볼수 있다.
예제명 : $Many.html
.
.
.
$('dom1').update(MountainArray[0]);
$('dom2').update(MountainArray[1]);
// $() 함수 형태
var elementArray = $('loop1', 'loop2');
for (var i = 0; i < MountainArray.length; i++) {
elementArray[i].innerHTML = MountainArray[i];
}
// each()
$('likeSport1', 'likeSport2').each(function(htmlElement, index) {
$('sport' + index).innerHTML = htmlElement.value;
});
.
.
.
엘리먼트ID가 1개인 경우의 처리와 2개 이상인 경우의 처리를 함수형태와 each메소드를 이용해서 처리한 예제를 보여준다.
hide : 엘리먼트가 보이지 않도록 한다. Element.hide() 아규먼트는 없고 Object를 반환 한다.
hide: function(element) {
$(element).style.display = 'none';
return element;
},
예제명 : hide.html
.
.
var returnElmt = $('likeSport').hide();
$('show1').update('숨겨진 엘리먼트: ' + returnElmt);
returnElmt = $('soccer').hide();
$('show2').update('숨겨진 엘리먼트: ' + returnElmt.id);
returnElmt = Element.hide('basketBall');
$('show3').update('숨겨진 엘리먼트: ' + returnElmt);
.
.
메소드를 호출 하는 차이점을 눈여겨 본다. ($() 과 Element로 호출 하는 차이)
show : 엘리먼트가 보이게 한다. Element.show() 아규먼트는 없고 Object를 반환 한다.
show: function(element) {
$(element).style.display = '';
return element;
},
예제명 : show.html
.
.
noneDisplay: function(event) {
$('likeSport').hide();
},
display: function(event) {
$('likeSport').show();
},
hidden: function(event) {
var returnElmt = $('sportHidden').show()
$('show1').update('히든 엘리먼트: ' + returnElmt.id);
}
.
.
visible : 엘리먼트가 보이는 상태면 true 보이지 않는 상태면 false를 반환한다.
visible: function(element) {
return $(element).style.display != 'none';
},
예제명 : visible.html
.
.
visible: function(event) {
$('likeSport').show();
$('show1').innerHTML = '상태 : ' + Element.visible('likeSport');
},
noneVisible: function(event) {
$('likeSport').hide();
$('show1').innerHTML = '상태 : ' + Element.visible('likeSport');
}
.
.
따로 설명할 내용이 없다.
toggle : 엘리먼트의 숨김과 표시를 토글한다. (보이는 상태에서 클릭하면 안보이게 한번더 클릭하면 보이게 한다.)
toggle: function(element) {
element = $(element);
Element[Element.visible(element) ? 'hide' : 'show'](element);
//true 이면 Element['hide'](element);
//false 이면 Element['show'](element);
return element;
},
예제명 : toggle.html
.
.
$('likeSport').toggle();
.
.
각 프로토타입 버전에 따라 토글의 아규먼트가 복수로 들어 올수도 있고 하나만 지정될수도 있기때문에 사용버전을 확인해야 한다.
toggleClassName : 엘리먼트를 선택해서 아규먼트로 넘겨준 css를 적용 또는 비적용한다.
toggleClassName: function(element, className) {
if (!(element = $(element))) return;
return element[element.hasClassName(className) ? 'removeClassName' : 'addClassName'](className);
},
예제명 : toggleClassName.html
.cssName {
border: solid;
border-color: blue;
width: 300px;
background-color: yellow; }
//위와 같은 css코드를 넣고
.
$('likeSport').toggleClassName('cssName'); // 다음과 같이 호출 한다.
.
.
remove : 선택한 엘리먼트를 삭제 한다. 하위레벨의 엘레먼트는 자동으로 삭제 된다. 호출하는 스크립트에서는 예외처리를 통하여 remove가 한번 더발생할때에 대한 예외처리가 필요하다.
remove: function(element) {
element = $(element);
element.parentNode.removeChild(element);
return element;
},
예제명 : remove.html
'
'
'
low: function(event) {
try {
$('middleElmt').removeChild($('lowElmt'));
} catch (e) {
$('show1').innerHTML = '최하위 엘리먼트가 존재하지 않습니다.';
}
},
.
.
.
설명이 따로 필요한 부분은 없고 try catch문을 이용하여 예외처리를 하였다.
update : 문자열 또는 문자열로 처리된 스크립트 블럭 또는 스크립트 를 아규먼트로 받고 스크립트나 문자열처리된 스크립트는 블럭은 실행된다.
update: function(element, content) {
element = $(element);
if (content && content.toElement) content = content.toElement();
if (Object.isElement(content)) return element.update().insert(content);
content = Object.toHTML(content);
element.innerHTML = content.stripScripts();
content.evalScripts.bind(content).defer();
return element;
},
예제명 : update.html
'
'
'
var replaceSport = '농구, 마라톤';
$('likeSport').update(replaceSport);
var execScript = "<script>$('show1').innerHTML = '한라산, 설악산';</script>";
$('show1').update(execScript);
.
.
.
update를 이용해서 문자열을 변경 할수도 있고 내부의 스크립트를 실행 하는것도 가능하다.
classNames: 엘리먼트의 클래스 이름을 반환한다.
classNames: function(element) {
return new Element.ClassNames(element);
},
예제명 : classNames.html
'
'
'
$('spaceTravel').className = returnCss;
$('show2').innerHTML = '우주여행 : ' + $('spaceTravel').className;
.
.
.
scrollTo: 엘리먼트의 위치로 스크롤 한다.
scrollTo: function(element) {
element = $(element);
var pos = element.cumulativeOffset();
window.scrollTo(pos[0], pos[1]);
return element;
},
예제명 : scrollTo.html
'
'
$('scrollPos').scrollTo(); .
.
.
makeClipping: 선택된 엘리먼트의 width 또는 height보다 넘치는 부분을 보이지 않게 한다. // undoClipping은 반대의 역활을 한다.
makeClipping: function(element) {
element = $(element);
if (element._overflow) return element;
element._overflow = Element.getStyle(element, 'overflow') || 'auto';
if (element._overflow !== 'hidden')
element.style.overflow = 'hidden';
return element;
},
예제명 : makeClipping.html
'
'
$('clipping').makeClipping();
.
.
readAttribute : 선택한 아규먼트의 지정한 속성의 값을 반환 한다.
readAttribute: function(element, name) {
element = $(element);
if (Prototype.Browser.IE) {
var t = Element._attributeTranslations.read;
if (t.values[name]) return t.values[name](element, name);
if (t.names[name]) name = t.names[name];
if (name.include(':')) {
return (!element.attributes || !element.attributes[name]) ? null :
element.attributes[name].value;
}
}
return element.getAttribute(name);
},
예제명 : readAttribute.html
'
'
$('show1').update('type: ' + $('mountain').readAttribute('type'));
$('show2').update('value: ' + $('sport').readAttribute('value'));
.
.
descendants: 선택한 엘리먼트에 속한 차일드 엘리먼트를 반환한다.
descendants: function(element) {
return $A($(element).getElementsByTagName('*')).each(Element.extend);
},
$(element).getElementsByTagName('*') $(element) 속에 속한 모든 엘리먼트를 오브젝트로 추출한다. 그렇게 되면 결과는 $A() 함수의 아규먼트가 될수 있다.
$A() 함수는 아규먼트에 지정한 오브젝트를 배열로 반환한다. 즉 $(element)에 있는 모든 엘리먼트를 배열로 만들어 반환한다.
그결과를 each() 를 통하여 반복하여 Element.extend 한다.
예제명 : descendants.html
'
'
var child = $('korea').descendants(); .
.